<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>文章管理</title>
		<link href="plugin/date/date.css" rel="stylesheet">
		<link href="bootstrap/css/bootstrap3.min.css" rel="stylesheet">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/nav.css" />
		<script src="plugin/wangEditor3/js/wangEditor.min.js"></script>
		<style>
			.form-group-update {
				margin-right: 2%;
			}
			.imgsBox  {display: inline-block; margin-right: 5px; margin-top: 5px;}
			.imgsBox img{ width: 100px;}
		</style>
	</head>
	<body>
		<!--导航-->
	    <nav class="navbar navbar-inverse">
	      <div class="container-fluid">
	        <div class="navbar-header">
	          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
	            <span class="sr-only">Toggle navigation</span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	            <span class="icon-bar"></span>
	          </button>
		          	<a class="navbar-brand" href=""><img src="images/admin_logo.png" alt=""></a>
	        </div>

	        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
	          <ul class="nav navbar-nav" id="nav">

	          </ul>
	          <ul class="nav navbar-nav navbar-right">
	            <li class="dropdown">
	              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">欢迎您：<span id="uname"></span><span class="caret"></span></a>
	              <ul class="dropdown-menu" role="menu">
	                <li><a href="change_pass.html">修改密码</a></li>
	                <li><a id="loginOut" href="#">退出登陆</a></li>
	              </ul>
	            </li>
	          </ul>
	        </div>
	      </div>
	    </nav>
		<div class="container-fluid">
			<div class="row bcert-box">
				<ol class="breadcrumb">
				  <li><a href="javascript:;">主页</a></li>
				  <li>网站设置</li>
				  <li class="active">文章管理</li>
				</ol>
				<form class="form-inline searchForm" id="">
          <div class="form-group">
            <span class="theme-title">处理状态:</span>
            <select class="form-control drop-down" name='operationType' id="acId">
            </select>
          </div>
          <div class="form-group">
              <input type="text" class="form-control" style="padding-left:12px;" name="orderNo" id="articleTitle" placeholder="文章标题">
          </div>
          <div class="form-group">
            <!-- <button type="button" class="btn btn-primary btn-success" id="Reset"></span>重置</button> -->
            <button type="button" class="btn btn-primary btn-default" id="QueryBtn" data-toggle="button" aria-pressed="false" autocomplete="off">查询</button>
            <button type="button" class="btn btn-primary btn-success" data-toggle="modal" id="addBtn" data-target="">添加文章</button>
          </div>
        </form>
				<div class="table">
		          	<table class="table table-bordered table-striped" id="integralList">

		          	</table>
		        </div>
				<!-- 分页 -->
		        <nav aria-label="...">
		            <div class="">
		            	<span id="pageNum">共&nbsp;<strong></strong>&nbsp;页&nbsp;/&nbsp;</span><span id="totalNum">&nbsp;<strong>0</strong>&nbsp;条数据</span>
		            </div>
		            <ul id="example"></ul>
		        </nav>
		    </div>
		</div>

		<div class="modal fade" tabindex="-1" id="editRole" role="dialog" aria-labelledby="">
			<div class="modal-dialog modal-lg" role="document">
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
						</button>
							<h4 class="modal-title" id="myLargeModalLabel">详细</h4>
					</div>
					<div class="modal-body" style="overflow:auto">
						 <div class="form-group">
							 <label class="col-sm-2 control-label goods-lb-l">文章标题</label>
							 <div class="col-sm-10 goods-lb-r">
								 <input type="text" class="form-control" id="articleTitleInfo" placeholder="文章标题">
							 </div>
						 </div>
						 <!-- <div class="form-group">
							 <label class="col-sm-2 control-label goods-lb-l">跳转链接</label>
							 <div class="col-sm-10 goods-lb-r">
								 <input type="text" class="form-control" id="articleUrlInfo" placeholder="跳转链接">
							 </div>
						 </div> -->
						 <div class="form-group">
							<label class="col-sm-2 control-label goods-lb-l">文章类型</label>
							<div class="col-sm-10 goods-lb-r">
								<select class="form-control drop-down" id="acIdInfo">

								</select>
							</div>
						</div>
						<div class="form-group">
						   <label class="col-sm-2 control-label goods-lb-l">文章排序</label>
						   <div class="col-sm-10 goods-lb-r">
							   <input type="text" class="form-control" id="articleSortInfo" placeholder="文章排序">
						   </div>
					   </div>
						<div class="form-group">
						   <label class="col-sm-2 control-label goods-lb-l">文章封面图</label>
						   <div class="col-sm-10 goods-lb-r">
							   	<form enctype="multipart/form-data" class="imgForm col-sm-6">
		   							<input type="file" name="file" onchange="imgup(this,$(this).parent())" placeholder="图片尺寸：640*240" class="input04">
		   							<input type="hidden" name="imgPath" value="articles">
	   							</form>
	   							<div class="imgsBox col-sm-2" style="margin:0 auto">

	   							</div>
						   </div>
					   </div>
					   <div class="form-group">
						 <label class="col-sm-2 control-label goods-lb-l">文章内容</label>
						 <div class="col-sm-10 goods-lb-r"><div id="articleContentInfo"></div></div>
					   </div>
					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
						<button type="button" class="btn btn-primary" id="entBtns">确认提交</button>
					</div>
				</div>
				<!-- /.modal-content -->
			</div>
			<!-- /.modal-dialog -->
		</div>
	</body>
</html>
<script type="text/javascript" src="plugin/layer/layer.js"></script>
<script type="text/javascript" src="js/cookie.js"></script>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript" src="js/ajax.js"></script>
 <script type="text/javascript" src="js/bootstrap-paginator.js"></script>
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/bootstrap-filestyle.min.js"></script>
<script src="plugin/wangEditor3/js/wangEditor.min.js"></script>
<script>
	$(document).ready(function() {
		articlesType()
		tableList()
	});
	$('#QueryBtn').click(function() {
		tableList()
	});
	var pageUrls =  serverURL + '/ewArticle/queryAllEwArticle';
	var permissionsUrls  = ''
	//分页
    function tableList(){
  	  data = {
		  'articleTitle':$('#articleTitle').val(),
		  'acId':$('#acId').val(),
  		  'page': page,
  		  'pageSize': pagesize
  	  }
  	  data.page = 1
  	  ajax(
  		  pageUrls,
  		  data,
  		  pageNumList,
  		  'post',
  		  'json'
  	  )
    }
	//数据渲染
    function OpendList(res){
      var result = '';
      $('#integralList').empty();
      $('#integralList').append(
        '<tr>' +
        '<th>文章id</th>' +
        '<th>排序</th>' +
		'<th>标题</th>' +
		'<th>文章分类</th>' +
		'<th>添加时间</th>' +
		'<th>操作</th>' +
    	'</tr>'
      );
		for (var i = 0; i < res.data.list.length; i++) {
			result +=
	           	'<tr>'+
	             '<td>'+ res.data.list[i].articleId +'</td>'+
	             '<td>'+ res.data.list[i].articleSort +'</td>'+
				 '<td>'+ res.data.list[i].articleTitle +'</td>'+
	             '<td>'+ res.data.list[i].articleClassName +'</td>'+
				 '<td>'+ res.data.list[i].addTime +'</td>'+
		   		 '<td class="text-center"><button data-id="'+ res.data.list[i].articleId +'" id="delRole" class="btn btn-danger btn-sm" onclick="delRole('+ res.data.list[i].articleId +')">删除</button>&nbsp;&nbsp;&nbsp;<button data-id="'+ res.data.list[i].articleId +'" class="btn btn-primary btn-sm editRole">编辑</button></td>'+
	            '</td></tr>'
		}
      $('#integralList').append(result)
    }
	//删除
	function delRole(id){
		layer.confirm('确定要删除吗？', {
			btn: ['确认','取消'] //按钮
		}, function(){
			var data = {
				'articleIds':id
			}
			var cbk = function(){
				tableList()
				// $('#acId').append()
			}
			ajax(
	    		serverURL + '/ewArticle/deleteByArticleId',
	    		data,
	    		cbk,
	    		'post',
	    		'json'
	    	)
		}, function(){
		});

	}

	//获取文章类型//
	function articlesType() {
		var data = null
		var cbk = function(res){
			var html = '';
			$('#acId').empty();
			for (var i = 0; i < res.data.length; i++) {
				if (res.data[i].acParentId != 0) {
					html +='<option value="'+ res.data[i].acId +'">'+'&nbsp;&nbsp;&nbsp;&nbsp;'+ res.data[i].acName +'</option>'
				}else{
					html +='<option value="'+ res.data[i].acId +'">'+ res.data[i].acName +'</option>'
				}

			}
			$('#acId').append(html)
			$('#acId').prepend('<option value="">选择文章分类</option>')
			$('#acId').val('')
			$('#acIdInfo').append(html)
			$('#acIdInfo').prepend('<option value="">选择文章分类</option>')
			$('#acIdInfo').val('')
			tableList()
		}
		ajax(
			serverURL + '/ewArticleClass/queryAll',
			data,
			cbk,
			'post',
			'json'
		)
	}

	//添加
	$('#addBtn').click(function(){
		$('#entBtns').attr('data-id','')
		permissionsUrls = '/ewArticle/saveEwArticle';
		$('#editRole').modal();
		$('.input04').filestyle({
			htmlIcon : '<span class="oi oi-folder"></span> ',
			text: '预览',
			btnClass : 'btn-primary'
		});
	})

	//编辑
	$(document).on('click', '.editRole', function() {
		var id = $(this).attr('data-id')
		$('#entBtns').attr('data-id',id)
		permissionsUrls = '/ewArticle/updateByArticleId';
		$('#editRole').modal();
		$('.input04').filestyle({
			htmlIcon : '<span class="oi oi-folder"></span> ',
			text: '预览',
			btnClass : 'btn-primary'
		});
		var data = {
			'articleId':id
		}
		var cbk = function(res){
			$('#articleTitleInfo').val(res.data.articleTitle);
			// $('#articleUrlInfo').val(res.data.articleUrl);
			$('#acIdInfo').val(res.data.acId);
			$('#articleSortInfo').val(res.data.articleSort);
			editor.txt.html(res.data.text)
			$('.imgsBox').html('<img class="img-thumbnail" src="'+ cncbk_common_tools.imgURL+ res.data.articleThumb +'" alt=""><input type="hidden" name="" value="'+ res.data.articleThumb +'" class="imgName">')
		}
		ajax(
			cncbk_common_tools.serverURL + '/ewArticle/queryByArticleId',
			data,
			cbk,
			'post',
			'json'
		)
	})
	//添加修改
	$('#entBtns').click(function(){
		id = $(this).attr('data-id')
		var data = {
			'articleId':id,
			'articleTitle':$('#articleTitleInfo').val(),
			'articleUrl':$('#articleUrlInfo').val(),
			'acId':$('#acIdInfo').val(),
			'articleThumb':$('.imgName').val(),
			'articleSort':$('#articleSortInfo').val(),
			'articleContent':editor.txt.html()
		}
		var callback = function(res){
			$('#editRole').modal('hide')
			tableList()
		}
		ajax(
			serverURL + permissionsUrls,
			data,
			callback,
			'post',
			'json',
			false
		)
	})

	$('#editRole').on('hidden.bs.modal', function (e) {
		$('#articleTitleInfo').val('');
		$('#articleUrlInfo').val('');
		$('#acIdInfo').val('');
		$('#articleSortInfo').val('');
		editor.txt.html('')
		$('.imgsBox').html('')
	})

	function imgup(upImg,ADD) {
		var datas = new FormData(ADD[0]);
		var size = upImg.files[0].size;//得到图片的大小
		var trueSize = Math.ceil(size/1024);//把字节转换成kb
		if (trueSize > 2048) {
			alert("请上传小于2M的图片")
			return false;
		}
		var fileImg = upImg.files[0].name;            //图片名
		var extStart=fileImg.lastIndexOf(".");
		var ext=fileImg.substring(extStart,fileImg.length).toUpperCase();
		if (ext!=".BMP"&&ext!=".PNG"&&ext!=".GIF"&&ext!=".JPG"&&ext!=".JPEG") {
			alert("图片类型必须是.gif,jpeg,jpg,png中的一种")
			return false;
		};
		console.log(datas)
		$.ajax({
		 url: serverURL +  '/platform/getOssUpload',
		 type: "post",
		 dataType: "json",
		 cache: false,
		 contentType: false,
		 processData: false,
		 data:datas,
		 xhrFields: {
		 	withCredentials: true
	 	},
	 	success: function (data) {
		 	if (data.code == 200) {
				var src = data.picName
				$('.imgsBox').html('<img class="img-thumbnail" src="'+ cncbk_common_tools.imgURL+ src +'" alt=""><input type="hidden" name="" value="'+ src +'" class="imgName">')
		 	}
		}
	 });
	 return false
	}
	var E = window.wangEditor
	var editor = new E('#articleContentInfo')
	editor.customConfig.pasteFilterStyle = false
	editor.customConfig.uploadImgServer = serverURL + '/platform/getUpload'
	editor.create()
</script>
